import React from 'react';
import { InbizIcon, getSiteType } from '@inbiz/utils';
import { TextWidget, getMessage } from '@inbiz/react';
import { Typography } from 'antd';
import './index.less';

const { Title } = Typography;
const prefixCls = 'inbiz-BizHeader';

const BizHeader: React.FC<any> = (props) => {
  const {
    title = {
      value: '',
      status: false,
    },
    leftExtra,
    extra,
    separate,
  } = props;
  const style = {
    height: 60,
    fontSize: 20,
    color: 'var(--inbiz-color-heading)',
    padding: `0 ${getSiteType() == '1' ? '15px' : '20px'}`,
    ...props.headerStyle,
    borderBottom: separate ? '1px solid var(--inbiz-color-border-base)' : 'none',
    minHeight: props?.headerStyle?.height || 60
  };
  let viewIcon = props.icon ? props.icon : null;
  viewIcon = props.headerStyle && props.headerStyle.icon ? props.headerStyle.icon : viewIcon;

  return !title.status ? null : (
    <div className={prefixCls} style={style}>
      <div className={`${prefixCls}-left`}>
        <Title
          ellipsis={{ tooltip: true }}
          className={`${prefixCls}-title`}
          style={{
            marginRight:
              (title.value && title.value !== '') || props.headerStyle?.icon?.type !== '' ? 20 : 0,
          }}
        >
          {viewIcon && viewIcon?.type ? (
            <InbizIcon
              type={viewIcon.type}
              style={{
                fontSize: viewIcon.size || 32,
                marginRight: title.value && title.value !== '' ? 20 : 0,
                ...viewIcon,
              }}
            />
          ) : null}
          <span
            title={getMessage(title.value)}
            style={{
              overflow: 'hidden',
              width: '100%',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
            }}
          >
            <TextWidget>{title.value}</TextWidget>
          </span>
        </Title>
        {leftExtra}
      </div>
      {extra}
    </div>
  );
};

export default BizHeader;
